<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="layout-container-demo" style="height: 100%">
    <el-container class="app-wrapper">
      <nav-menu/>
      <el-container>

 <el-header>
   <div class="navbar">
    <breadcrumb/>
     <div class="navbar-right">
       <div class="navbar-item">
         <el-dropdown class="left-auto" >
            <el-icon :size="17"><setting/></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人资料</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown></div>
      </div>
   </div>
 </el-header >
        <el-main class="el-main">
           <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>
<script setup>
import NavMenu from "@/components/NavMenu.vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
import {useRouter} from "vue-router";
import {Edit, Fold, Setting} from "@element-plus/icons-vue";
import { removeToken } from '@/composables/auth.js'
const  router =useRouter()
const collapse = ()=>{
}
const logout =()=>{
  removeToken()
  sessionStorage.clear();
  router.replace('/login')
}
</script>

<style scoped>
.navbar {
  width: 100%;
  height: 60px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  .navbar-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    ::v-deep .navbar-item {
      display: inline-block;
      margin-left: 18px;
      font-size: 22px;
      color: #5a5e66;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}

.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
  }
</style>